<script>

import LayoutComponent from '@/components/LayoutComponent.vue'
import BlogListComponent from '@/components/BlogListComponent.vue'

export default {
  name: 'CategoryView',
  components: { BlogListComponent, LayoutComponent },
  data () {
    return {
      categoryList: [],
      categoryIndex: '',
      blogList: [],
      categoryId: ''
    }
  },
  methods: {
    getCategoryList () {
      this.$axios.get('api/category/list').then(data => {
        this.categoryList = [...data]
      }).catch(e => e)
    },
    selectCategory (index) {
      this.categoryIndex = index
      this.getCategoryId()
    },
    getCategoryId () {
      this.categoryId = this.categoryIndex !== '' ? this.categoryList[this.categoryIndex].categoryId : ''
    }
  },
  created () {
    this.$nextTick(() => {
      this.getCategoryList()
    })
  }
}
</script>

<template>
  <layout-component :active-index="1">
    <div>
      <el-tag :type="categoryIndex === '' ?'dark':''" @click="selectCategory('')">全部</el-tag>
      <el-tag  v-for="(category,index) in categoryList" @click="selectCategory(index)" :type="categoryIndex === index ? 'dark' :''" :key="category.categoryId">{{category.name}}</el-tag>
      <blog-list-component :type="2" :category-id="categoryId"/>
    </div>
  </layout-component>
</template>

<style scoped lang="scss">

</style>
